<template>
  <div>
    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="item">
        <el-form-item label="场所名" :label-width="formLabelWidth">
          <el-input v-model="item.dsAreaName" placeholder="如：6A105"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="item.dsAreaNote"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editHandler()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 搜索功能 -->
    <div>
      <el-input style="width: 200px" suffix-icon="el-icon-search" v-model="searchValue"/>
      <el-button class="ml-15" type="primary" @click="searchAreaByName(searchValue)">搜索</el-button>
      <el-button class="ml-15" type="success" @click="selectAll()">显示全部</el-button>
    </div>
    <!-- 添加功能 -->

    <div style="margin: 10px 0">
      <el-button type="primary" @click="add()">添加场所<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-button type="danger" @click="removeAll()">批量删除<i class="el-icon-remove-outline"></i></el-button>
    </div>
    <!-- 表格展示 -->

    <el-table
        :data="tableData"
        ref="multipleTable"
        border
        style="width: 100%">
      <el-table-column
          type="selection" v-if="true">
      </el-table-column>

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="创建时间">
              <span>{{ props.row.createTime?new Date(props.row.createTime).toLocaleString(): null }}</span>
            </el-form-item>
            <el-form-item label="近一次修改">
              <span>{{ props.row.modifyTime?new Date(props.row.modifyTime).toLocaleString(): '未修改'}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="ID"
          prop="dsAreaId">
      </el-table-column>
      <el-table-column
          label="场所名"
          prop="dsAreaName">
      </el-table-column>
      <el-table-column
          label="备注"
          prop="dsAreaNote"
      >
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
            <el-button type="warning" @click="edit(scope.row)">编辑<i class="el-icon-edit"></i> </el-button>
            <el-button type="danger" @click="remove(scope.row)">删除 <i class="el-icon-remove-outline"></i></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页功能 -->
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "AreaTableView",
  data() {
    return {
      item: {
        createTime: null,
        deleted: null,
        dsAreaId: null,
        dsAreaName: null,
        dsAreaNote: null,
        modifyTime: null
      },
      tableData: [
        this.item
      ],
      pageTotal: null,
      pageSize: 5,
      currentPage: 1,
      searchValue: null,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      formTitle: null
    }
  },

  methods: {
    removeAll() {
      console.log(this.$refs.multipleTable.selection)
      let ids = [];
      this.$confirm('此操作将删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (const i in this.$refs.multipleTable.selection) {
          ids.push(this.$refs.multipleTable.selection[i].dsAreaId)
        }
        if(ids.length===0){
          this.$confirm('请选择删除对象！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
        else {
          this.api.areaApi.removeAll(ids).then((res) => {
            if (res) {
              this.$notify({
                title: '成功',
                message: '有' + ids.length + '个设备删除成功',
                type: 'success'
              })
              this.selectCurrentPageArea(this.currentPage, this.pageSize, this.searchValue)
            } else {
              this.$notify.error({
                title: '失败'
              })
            }
          }).catch(err => {
            console.log(err)
            this.$notify.error({
              title: '失败',
              message: '信息：' + err
            })
          })
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });

    },
    selectCurrentPageArea(page, pageSize, name) {
      this.api.areaApi.selectPage(page, pageSize, name)
          .then(res => {
            this.tableData = res[0]
            this.pageTotal = res[1]
          })
          .catch(err => {
            console.log(err)
          })
    },

    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.selectCurrentPageArea(this.currentPage, pageSize, this.searchValue)
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.selectCurrentPageArea(currentPage, this.pageSize, this.searchValue)
    },

    searchAreaByName(name) {
      this.currentPage = 1
      this.selectCurrentPageArea(this.currentPage, this.pageSize, name)
    },

    selectAll() {
      this.currentPage = 1
      this.searchValue = ''
      this.selectCurrentPageArea(this.currentPage, this.pageSize, '')
    },

    add() {
      this.item = {
        createTime: null,
        deleted: null,
        dsAreaId: null,
        dsAreaName: null,
        dsAreaNote: null,
        modifyTime: null
      }
      this.formTitle = '添加场所'
      this.dialogFormVisible = true
    },

    edit(data) {
      this.item = data
      this.formTitle = '编辑场所'
      this.dialogFormVisible = true
    },

    addArea(data) {
      this.api.areaApi.addArea(data)
          .then(res => {
            if (res) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              })
              this.selectCurrentPageArea(this.currentPage, this.pageSize, '')
            } else {
              this.$notify.error({
                title: '失败'
              })
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: '失败',
              message: '信息：' + error
            })
            console.log(error)
          })
      this.dialogFormVisible = false
    },

    editArea(data) {
      this.api.areaApi.updateArea(data)
          .then(res => {
            if (res) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              })
              this.selectCurrentPageArea(this.currentPage, this.pageSize, this.searchValue)
            } else {
              this.$notify.error({
                title: '失败'
              })
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: '失败',
              message: '信息：' + error
            })
            console.log(error)
          })
      this.dialogFormVisible = false
    },

    editHandler() {
      if (this.item.dsAreaId == null) {
        this.addArea(this.item)
      } else {
        this.editArea(this.item)
      }
    },

    deleteArea(data) {
      this.api.areaApi.deleteArea(data)
          .then(res => {
            if (res) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              })
              this.selectCurrentPageArea(this.currentPage, this.pageSize, this.searchValue)
            } else {
              this.$notify.error({
                title: '失败'
              })
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: '失败',
              message: '信息：' + error
            })
            console.log(error)
          })
    },

    remove(data) {
      this.$confirm('此操作将删除场所, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteArea(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  },



  beforeMount() {
    this.selectCurrentPageArea(this.currentPage, this.pageSize, '')
  }
}
</script>
